<template>
    <div>
        <el-row>
            <el-form :inline="true" ref="searchForm" :model="searchParams">
                <el-form-item label="搜索" prop="search">
                    <el-input v-model="searchParams.search"></el-input>
                </el-form-item>
                <el-form-item label="分类" prop="category">
                    <el-select v-model="searchParams.category" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item, index) in options" :key="index" :label="item.trim()" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="search">
                    <el-button type="primary" @click="searchHandler">搜索</el-button>
                    <el-button type="primary" @click="resetHandler">重置</el-button>
                </el-form-item>
            </el-form>
        </el-row>

        <el-table :data="showList" border height="500px" style="width: 100%;">
            <!-- <el-table-column prop="proid" label="编号" width="180">
            </el-table-column> -->
            <el-table-column prop="proname" label="商品名称" width="250">
            </el-table-column>
            <el-table-column prop="originprice" label="原价" width="180">
            </el-table-column>
            <el-table-column prop="currentprice" label="现价" width="180">
                <!-- v-slot='slotScope'  slotScope = {row,col,$index} -->
                <!-- 可以在当前列中有选择的渲染一部分内容 -->
                <template v-slot="{ row }">
                    <span v-if="row.discount != 10">{{ row.originprice * row.discount / 10 }} </span>
                    <span v-else>暂无折扣</span>
                </template>
            </el-table-column>
            <el-table-column prop="img1" label="图片" width="180">
                <template v-slot="{ row }">
                    <!-- <img width="50" :src="row.img1" alt=""> -->
                    <el-image style="width:50px" :src="row.img1"
                        :preview-src-list="[row.img1, row.img2, row.img3, row.img4]">
                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="推荐状态" width="180">
                <template v-slot="{ row }">
                    <el-switch v-model="row.isrecommend" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="秒杀状态" width="180">
                <template v-slot="{ row }">
                    <el-switch v-model="row.isseckill" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="0">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template v-slot="{ row }">
                    <el-button @click="searchDetailHandler(row.proid)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- <el-row >
            <el-pagination 
                class="page-box"
                :pager-count="8"
                :page-sizes="[5,10,15,20,50]"
                :page-size.sync = "pageParams.limitNum"
                :current-page.sync = "pageParams.count"
                layout="prev, pager, next, total, sizes, jumper"
                prev-text="上一页"
                next-text="下一页"
                background
                @size-change="sizeChangeHandler"
                @current-change="currentChangeHandler"
                :total="total">
            </el-pagination>
        </el-row> -->

        <el-drawer title="商品详情" :visible.sync="isVisible" direction="rtl" size="50%" :with-header="false">
            <el-main>
                <el-descriptions v-if="detailInfo" class="margin-top" title="商品详情" size="small" :column="1"  border :labelStyle="{
                    whiteSpace:'nowrap',
                    textAlign:'right',
                }">
                    <template slot="extra">
                        <el-button type="primary" size="small">操作</el-button>
                    </template>
                    <el-descriptions-item>
                        <template slot="label">
                            商品名称
                        </template>
                        <template>
                            {{ detailInfo.proname }}
                        </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            品牌
                        </template>
                        <template>
                            {{ detailInfo.brand }}
                        </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            分类
                        </template>
                        <template>
                            {{ detailInfo.category }}
                        </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            商品描述
                        </template>
                        <template>
                            {{ detailInfo.desc }}
                        </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            价格
                        </template>
                        <template>
                            <span style="margin-right:20px">{{ detailInfo.originprice }}</span>
                            <span v-if="detailInfo<10">{{ (detailInfo.originprice*detailInfo.discount/10) }}</span>
                        </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            商品展示
                        </template>
                        <template>
                            <el-image style="width:100px;" :src="detailInfo.img1" :preview-src-list="[detailInfo.img1,detailInfo.img2,detailInfo.img3]"></el-image>
                        </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            库存
                        </template>
                        <template>
                            {{ detailInfo.issale ? detailInfo.stock : 0 }}
                        </template>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">
                            销量
                        </template>
                        <template>
                            {{ detailInfo.sales }}
                        </template>
                    </el-descriptions-item>


                </el-descriptions>
            </el-main>
        </el-drawer>
    </div>
</template>

<script>
import { getProCategoryAPI, getSearchProAPI, getProDetailAPI } from '@/api/goods';
export default {
    name: "GoodsListView",
    data() {
        return {
            list: [],
            options: [],
            detailInfo: null,
            total: 0,
            searchParams: {
                category: "",
                search: "",
            },
            page: 1,
            size: 10,
            isVisible: false,
        }
    },
    computed: {
        // 前端分页  => 后端返回所有数据(数组)  => 前端自己定义page,size => 对应截取
        showList() {

            // 数组的slice(starIndex,endIndex)   

            // page   size= 10
            // 第1页 [0-10)    
            // 第2页 [10-20)    
            // 第3页 [20-30)    
            //  page  [(page-1)*10,page*10)

            return this.list.slice((this.page - 1) * this.size, this.page * this.size);
        }
    },
    methods: {
        async getProCategoryAPI() {
            try {
                var res = await getProCategoryAPI();
                console.log("获取分类", res);
                this.options = res.data;
            } catch (err) {
                this.$message.error(err.message)
            }
        },
        async getSearchProAPI() {
            try {
                var res = await getSearchProAPI(this.searchParams);
                console.log("获取搜索的结果", res);
                this.list = res.data;
            } catch (err) {
                this.$message.error(err.message)
            }
        },
        async getProDetail(proid) {
            try {
                var res = await getProDetailAPI({ proid });
                console.log("获取商品详情结果", res);
                this.detailInfo = res.data[0];
            } catch (err) {
                this.$message.error(err.message)
            }
        },
        searchHandler() {
            this.getSearchProAPI();
        },
        resetHandler() {
            this.$refs.searchForm.resetFields();
            this.getSearchProAPI();
        },
        // 查询商品详情
        searchDetailHandler(proid) {
            console.log("点击查看", proid);
            this.isVisible = true;
            this.getProDetail(proid);
        },

    },
    mounted() {
        this.getProCategoryAPI();
        this.getSearchProAPI();
    }
}
</script>

<style lang="scss" scoped>
.page-box {
    margin-top: 10px;
    margin-right: 50px;
    float: right;
}
</style>